<style lang="less">
    @import '../../styles/common.less';
    @import '../../styles/table.less';
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title" style="height:25px;">
                        <Icon type="ios-keypad"></Icon> 产品列表
                        <Button type="info" size="small" style="float: right" @click="add"><Icon type="plus-round"></Icon> 新增</Button>
                    </p>
                    <Row>
                        <Select v-model="cat_id" style="width:200px">
                            <Option value="">请选择分类</Option>
                            <Option v-for="item in catList" :key="item.cat_id" :value="item.cat_id" >{{item.name}}</Option>
                        </Select>
                        <Select v-model="is_online" style="width:200px">
                            <Option value="">请选择状态</Option>
                            <Option :value="1" >上架</Option>
                            <Option :value="0" >下架</Option>
                        </Select>
                        <Input v-model="keywords" placeholder="请输入关键词..." style="width: 200px" />
                        <Date-picker type="daterange" @on-change="formatDate" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                        <span @click="getList" style=""><Button type="primary" icon="search">搜索</Button></span>
                        <Button @click="getList" type="ghost" >取消</Button>
                    </Row>
                    <p style="height: 15px;"></p>
                    <div>
                        <div>
                            <Table stripe :columns="columns" :data="rows" border></Table>
                        </div>
                        <div style="margin-top:10px;text-align: center;">
                             <Page :total="total" :page-size="per_page" :current="1" @on-change="changePage" ></Page>
                        </div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    name: 'getList',
    components: {
        // canEditTable //组件名称，需要import
    },
    data () {
        return {
            cat_id: null,
            is_online: null,
            catList: [],
            keywords: '',
            daterange:[],
            rows: [],
            current_page: 1,
            per_page: 20,
            total:0,
            total_page:1,
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    key: 'goods_id',
                    width: 80,
                }, {
                    title: '产品编号',
                    align: 'center',
                    key: 'goods_sn',
                    width: 150,
                }, {
                    title: '产品名称',
                    align: 'center',
                    key: 'goods_name',
                    width: 150,
                }, {
                    title: '图片',
                    align: 'center',
                    key: 'cover_img',
                    width: 150,
                    render: (h, params) => {
                        return h('img', {
                            attrs : {src : params.row.cover_img+'?x-oss-process=image/resize,h_50', style: 'margin:5px;'}
                        });
                    }
                }, {
                    title: '价格',
                    align: 'center',
                    key: 'price',
                    width: 80,
                    render: (h, params) => {
                        return params.row.price/100;
                    }
                }, {
                    title: '市场价',
                    align: 'center',
                    key: 'market_price',
                    width: 80,
                    render: (h, params) => {
                        return params.row.market_price/100;
                    }
                }, {
                    title: '排序',
                    align: 'center',
                    key: 'sort',
                    width: 80,
                }, {
                    title: '销量',
                    align: 'center',
                    key: 'sales_num',
                    width: 80,
                }, {
                    title: '点击量',
                    align: 'center',
                    key: 'click_count',
                    width: 80,
                }, {
                    title: '上架状态',
                    align: 'center',
                    key: 'is_online',
                    width: 120,
                    render: (h, params) => {
                        return params.row.is_online==1?'上架':'下架'
                    }
                }, {
                    title: '类型',
                    align: 'center',
                    key: 'is_real',
                    width: 120,
                    render: (h, params) => {
                        return params.row.is_real==1?'实物产品':'虚拟产品'
                    }
                },

                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {type: 'success', size: 'small'},
                                style: { marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.show(params.index)
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {type: 'primary', size: 'small'},
                                style: {marginRight: '5px'},
                                on: {
                                    click: () => {
                                        this.edit(params.row.goods_id)
                                    }
                                }
                            }, '编辑'),
                            h('Poptip', {
                                props: {confirm: true, title: '您确定要删除这条数据吗?', transfer: true},
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.goods_id);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {type: 'error', size: 'small'}
                                }, '删除')
                            ]),
                        ]);
                    }
                }
            ],
        };
    },
    methods: {
        getList() {
            this.$http.post('admin/goods/getList', this.$qs.stringify({
                per_page : this.per_page,
                page : this.current_page,
                cat_id: this.cat_id,
                is_online: this.is_online,
                keywords : this.keywords,
                daterange : this.daterange,
            })).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.rows = d.data.rows;
                    this.current_page = d.data.current_page;
                    this.total = d.data.total;
                    this.total_page = d.data.total_page;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            })
        },
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.rows[index].username}<br>
                        Address：${this.rows[index].email}`
            })
        },
        add () {
            this.$router.push({
                name: 'goodsAdd'
            });
        },
        edit (goods_id) {
            this.$router.push({
                name: 'goodsAdd',
                query: {goods_id: goods_id},
            });
        },
        remove (goods_id) {
            this.$http.post('admin/goods/delete', this.$qs.stringify({goods_id: goods_id})).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.getList();
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
        changePage (current_page) {
            this.current_page = current_page;
            this.getList();
        },
        formatDate (date) {
            this.daterange = date;
        },
        getCat () {
            this.$http.post('admin/goods/getCat', this.$qs.stringify()).then((res) => {
                var d = res.data;
                if (d.code == 0) {
                    this.catList = d.data;
                } else {
                    this.$Notice.error({
                        title: 'Error Warning',
                        desc: `Error：${d.msg}<br>`
                    });
                }
            });
        },
    },
    created () {
        this.getList();
        this.getCat();
    }
};
</script>
